<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>退款明细</span>
      </div>
      <div class="text item">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>售后单号：{{data.bn}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>退款类型：{{aftertypeArray[data.type]}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>所属商家：{{data.shop_name}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <span>商品实付金额：￥{{data.goods_amount}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <span>申请退款金额：￥{{data.apply_amount}}</span>
            </div>
          </el-col>
        </el-row>

      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>退款操作</span>
      </div>
      <div class="text item">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>实需退款：￥{{data.refund_amount}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>退款方式：{{data.refund_type?refundTypes[data.refund_type]:'未退款'}}</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple row-thr">
              <span>收款账号：<span>{{data.receive_account}}</span></span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <span>操作人：<span v-if="data.refund_type">{{data.operate}}</span></span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <span>退款备注：{{data.memo}}</span>
            </div>
          </el-col>
        </el-row>

      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    props: {
      detailInfo: {
        type: Object,
        default: ''
      }
    },
    name: "refund",
    data() {
      return {
        aftertypeArray:{
          20:'退货退款',
          10:'仅退款'
        },
        refundTypes:{
          'online': '资金中心退款',
          'offline': '线下退款'
        },
        data: this.detailInfo,
        activeName: 'first'
      }
    },
  }
</script>

<style lang="scss">
  .row-thr {
    margin-bottom: 30px
  }
  .box-card {
    margin-top: 20px;
  }

</style>
